<style include="iron-positioning">
  :host {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  #title {
    color: var(--cros-text-color-primary);
    font-weight: normal;
    line-height: 24px;
  }

  #message {
    height: var(--base-page-message-height, auto);
    margin-bottom: 20px;
  }

  :host ::slotted([slot='page-body']) {
    display: block;
    flex: 1 1 auto;
  }

  #message iron-icon {
    padding-inline-end: 4px;
  }
</style>
<template is="dom-if" if="[[isTitleShown_(title)]]" restamp>
  <h3 id="title">[[getTitle_(title)]]</h3>
</template>
<div id="message" aria-live="polite" aria-atomic="true">
  <iron-icon
      icon$="cellular-setup:[[messageIcon]]"
      hidden$="[[!isMessageIconShown_(messageIcon)]]">
  </iron-icon>
  [[message]]
</div>
<slot name="page-body"></slot>
